<template>
	<view class="page-container">
		<!-- 图片展示区 -->
		<view class="image-container">
			<ImgVue :src="artWorkDetail.imageUrl" mode="aspectFill" class="main-image" @doubletap="handleDoubleTap" />
			<view class="top-actions">
				<uni-icons type="back" size="24" color="#ffffff" class="back-icon" @click="handleBack" />
			</view>
		</view>

		<!-- 作者信息区 -->
		<view class="author-section">
			<view class="author-info">
				<ImgVue class="avatar" :src="artWorkDetail.avatar"/>
				<view class="author-details">
					<text class="author-name">{{artWorkDetail.nickname}}</text>
					<text class="post-time">2024年1月20日 · 杭州</text>
				</view>
				<uni-button size="mini" type="primary" class="follow-btn">关注</uni-button>
			</view>
			<text class="photo-description">{{artWorkDetail.description}}</text>
		</view>

		<!-- 评论区域 -->
		<scroll-view class="comments-section" scroll-y>
			<view class="comment-list">
				<view v-for="(comment, index) in comments" :key="index" class="comment-item">
					<ImgVue class="comment-avatar" :src="comment.avatar" />
					<view class="comment-content">
						<view class="comment-header">
							<text class="comment-author">{{comment.nickname}}</text>
							<text class="comment-time">{{comment.createTime}}</text>
						</view>
						<text class="comment-text">{{comment.content}}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部互动栏 -->
		<view class="interaction-bar">
			<view class="comment-input-wrapper">
				<input type="text" class="comment-input" placeholder="添加评论..." v-model="newComment"
					@focus="handleInputFocus" @blur="handleInputBlur" />
			</view>
			<view class="action-buttons">
				<view class="action-item" @click="handleLike">
					<uni-icons :type="isLiked ? 'heart-filled' : 'heart'" size="24"
						:color="isLiked ? '#ff5a5f' : '#333'" />
					<text class="action-count">{{artWorkDetail.likeCount}}</text>
				</view>
				<view class="action-item"  @click="handlePostComment">
					<uni-icons type="chat" size="24" color="#333" />
					<text class="action-count">{{artWorkDetail.commentCount}}</text>
				</view>
				<view class="action-item" @click="handleCollect">
					<uni-icons :type="isCollected ? 'star-filled' : 'star'" size="24"
						:color="isCollected ? '#ffd700' : '#333'" />
					<text class="action-count">{{artWorkDetail.favoritesCount}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
import { getArtWorkDetail } from '../../api/artwork';
import ImgVue from '../../components/Img/Img.vue';
import { getCommentList,putComment } from '../../api/comment';
import { putFavorite, putLike } from '../../api';

	const imageUrl = 'https://ai-public.mastergo.com/ai/img_res/ddbcd1dd78d7c5f820720e859c2f7b59.jpg';
	const authorAvatar = 'https://ai-public.mastergo.com/ai/img_res/80cddd7cebd7dfc88035dbace725ef21.jpg';
	
	const photoId = ref(null)

	const isLiked = ref(false);
	const isCollected = ref(false);
	const likeCount = ref(1234);
	const commentCount = ref(89);
	const collectCount = ref(456);
	const newComment = ref('');

	const comments = ref(null);
	
	const artWorkDetail = ref(null);

	const handleBack = () => {
		uni.navigateBack();
	};

	const handleShare = () => {
		uni.showShareMenu({
			withShareTicket: true
		});
	};

	const handleLike = () => {
		isLiked.value = !isLiked.value;
		
		fetchPutLike();
	};

	const handleCollect = () => {
		isCollected.value = !isCollected.value;
		
		// 进行收藏
		fetchPutCollect();
	};

	const handleDoubleTap = () => {
		if (!isLiked.value) {
			handleLike();
		}
	};

	const toggleCommentLike = (index : number) => {
		const comment = comments.value[index];
		comment.isLiked = !comment.isLiked;
		comment.likes += comment.isLiked ? 1 : -1;
	};

	const handleInputFocus = () => {
		// 处理输入框获得焦点
	};

	const handleInputBlur = () => {
		// 处理输入框失去焦点
	};
	
	const fetchArtWorkDetail = async()=>{
		const response = await getArtWorkDetail(photoId.value);
		artWorkDetail.value = response.data;
	}
	
	const fetchCommentList=async()=>{
		const response = await getCommentList(photoId.value)
		comments.value = response.data
	}
	
	const handlePostComment = async () => {
	    if (!newComment.value.trim()) {
	        uni.showToast({
	            title: '评论内容不能为空',
	            icon: 'none',
	        });
	        return;
	    }
	
	    try {
	        // 调用发布评论的 API
	        await putComment({
	            artworkId: photoId.value,
	            content: newComment.value.trim(),
	        });
	
	        // 清空输入框
	        newComment.value = '';
	
	        // 重新获取评论列表
	        await fetchCommentList();
	
	        uni.showToast({
	            title: '评论发布成功',
	            icon: 'success',
	        });
	    } catch (error) {
	        console.error('评论发布失败:', error);
	        uni.showToast({
	            title: '评论发布失败，请重试',
	            icon: 'none',
	        });
	    }
	};


	const fetchPutLike = async()=>{
		const response = await putLike(photoId.value)
		if(response.code ===200) {
			uni.showToast({
			    title: '点赞成功',
			    icon: 'success',
			});
		}
	}
	
	const fetchPutCollect = async() =>{
		const response = await putFavorite(photoId.value)
		if(response.code === 200){
			uni.showToast({
			    title: '收藏成功成功',
			    icon: 'success',
			});
		}
	}
	
	onLoad((options)=>{
		photoId.value = options.id;
		fetchArtWorkDetail();
		fetchCommentList();
		// 进行获取
	})
</script>

<style>
	page {
		height: 100%;
	}

	.page-container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
	}

	.image-container {
		position: relative;
		width: 750rpx;
		height: 900rpx;
		flex-shrink: 0;
	}

	.main-image {
		width: 100%;
		height: 100%;
	}

	.top-actions {
		position: absolute;
		top: 40rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.back-icon,
	.share-icon {
		width: 48px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 24px;
	}

	.author-section {
		padding: 30rpx;
		border-bottom: 1px solid #f0f0f0;
		flex-shrink: 0;
	}

	.author-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
	}

	.author-details {
		flex: 1;
	}

	.author-name {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
		display: block;
	}

	.post-time {
		font-size: 12px;
		color: #999999;
		display: block;
		margin-top: 4rpx;
	}

	.follow-btn {
		margin: 0;
	}

	.photo-description {
		font-size: 14px;
		color: #666666;
		line-height: 1.5;
	}

	.comments-section {
		flex: 1;
		overflow: auto;
	}

	.comment-list {
		padding: 30rpx;
	}

	.comment-item {
		display: flex;
		margin-bottom: 40rpx;
	}

	.comment-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		margin-right: 20rpx;
	}

	.comment-content {
		flex: 1;
	}

	.comment-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.comment-author {
		font-size: 14px;
		font-weight: 500;
		color: #333333;
	}

	.comment-time {
		font-size: 12px;
		color: #999999;
	}

	.comment-text {
		font-size: 14px;
		color: #666666;
		line-height: 1.4;
	}

	.comment-actions {
		margin-top: 10rpx;
	}

	.like-action {
		display: flex;
		align-items: center;
	}

	.like-count {
		font-size: 12px;
		color: #999999;
		margin-left: 8rpx;
	}

	.interaction-bar {
		padding: 20rpx 30rpx;
		border-top: 1px solid #f0f0f0;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.comment-input-wrapper {
		flex: 1;
		margin-right: 20rpx;
	}

	.comment-input {
		background-color: #f5f5f5;
		border-radius: 32rpx;
		padding: 16rpx 30rpx;
		font-size: 14px;
	}

	.action-buttons {
		display: flex;
		align-items: center;
	}

	.action-item {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
	}

	.action-count {
		font-size: 14px;
		color: #666666;
		margin-left: 8rpx;
	}
</style>